<template>
<view class="container">
<!-- 顶部固定区域 -->
<view class="header">
<view class="header-left">
<uni-icons type="left" size="20" @click="goBack" />
<text class="title">{{clazz.title}}</text>
</view>
</view>

<!-- 视频播放区域 -->
<view class="video-container">
<video
id="myVideo"
ref="videoRef"
class="video"
:src="videoUrl"
:controls="true"
:show-center-play-btn="true"
:enable-progress-gesture="true"
:show-fullscreen-btn="true"
></video>
</view>
<!-- 内容区域 -->
<view class="content">
<view class="tabs">
<view
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
:class="{ active: currentTab === index }"
@click="switchTab(index)"
>
{{ tab.name }}
</view>
</view>
<scroll-view
class="scroll-content"
scroll-y
>
<!-- 章节列表 -->
<view v-if="currentTab === 0" class="chapter-list">
<view
v-for="(chapter, index) in videoTree"
:key="index"
class="chapter-item"
@click="selectChapter(chapter,index)"
>
<view class="chapter-info">
<text class="chapter-title" :class="currentChapter === index ? ['active'] : ''">{{ chapter.title }}</text>
<text class="chapter-duration">30:00</text>
</view>
<view class="chapter-status">
<text v-if="chapter.free" class="free-tag">免费</text>
<!-- <uni-icons v-if="chapter.free" type="play-filled" size="16" color="#2979ff"/> -->
<!-- v-else -->
<uni-icons  type="lock-filled" size="16" color="#999"/>
</view>
</view>
</view>
<!-- 课程简介 -->
<view v-if="currentTab === 1" class="course-intro">
<view class="intro-section">
<text class="section-title">课程介绍</text>
<text class="section-content">{{clazz.description}}</text>
</view>
<view class="intro-section">
<text class="section-title">讲师介绍</text>
<text class="section-content">王教授，具有十年AI开发经验，曾任职于多家知名科技公司，专注于机器学习和深度学习领域。</text>
</view>
<view class="intro-section">
<text class="section-title">课程亮点</text>
<text class="section-content">• 系统化的AI基础知识体系\n• 实战项目驱动学习\n• 一线企业真实案例分析\n• 定期在线答疑解惑</text>
</view>
</view>
<!-- 课程笔记 -->
<view v-if="currentTab === 2" class="course-notes">
<view
v-for="(note, index) in noteList"
:key="index"
class="note-item"
>
<view class="note-header">
<text class="note-title">{{ note.title }}</text>
<text class="note-tag" v-if="note.free">免费</text>
</view>
<view class="note-preview">{{ note.preview }}</view>
</view>
</view>
</scroll-view>
</view>
<button class="generate-btn"  @click="tohomework">作业题目</button>
<!-- 底部购买栏 -->
<view class="bottom-bar">
<view class="price-info">
<text class="price">¥299</text>
<text class="origin-price">¥599</text>
</view>
<uni-button type="primary" class="buy-btn" @click="handleBuy">立即购买</uni-button>
</view>
</view>

</template>
<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { onMounted, ref} from 'vue';
import { getVideos } from '@/pages/utils/api/clazz.js'
const videoUrl = ref("http://192.168.75.1:9000/java113/后端开发/java语言基础/java第一阶段/56698fc2-df8b-46e0-80c5-ab98ad18181e.mp4")
//const videoUrl = ref('http://192.168.75.1:9000/java113/后端开发/undefined/java第一阶段/b256edc0-d41f-43be-bfc2-99c3b65bd37c.mp4')
const currentTab = ref(0)
const currentChapter = ref(0)
let clazz={};
const tabs = [
{ name: '章节' },
{ name: '简介' },
{ name: '笔记' }
]
const videoTree=ref([]);

const chapterList = [
{ title: '第1课-基础概念入门', duration: '30:00', free: true },
{ title: '第2课-AI基础环境搭建', duration: '45:00', free: false },
{ title: '第3课-AI智能体开发', duration: '60:00', free: false }
]
const noteList = [
{ title: '第1课-基础概念入门.md', preview: '人工智能基础概念解析，包含机器学习基础理论...', free: true },
{ title: '第2课-环境搭建详解.md', preview: 'Python开发环境配置，深度学习框架安装...', free: false },
{ title: '第3课-智能体开发笔记.md', preview: '智能体架构设计，强化学习算法实现...', free: false }
]
const switchTab = (index: number) => {
currentTab.value = index
}
const tohomework=()=>{
	  uni.navigateTo({
	    url: "/pages/homework/homework?description="+clazz.description,
		success() {
			console.log('跳转成功')
		}
		
	  });
	
	
}
const selectChapter = (chapter:any,index:any) => {

	console.log(chapter,index)
	currentChapter.value = index;
    videoUrl.value=chapter.link;
// if (chapterList[index].free) {
// currentChapter.value = index
// } else {
// uni.showToast({
// title: '请购买课程后观看',
// icon: 'none'
// })
// }
}
const goBack = () => {
uni.navigateBack()
}
//  course/getChapter
const getVideo =  async (courseId) =>{
	let data={
		courseId: courseId
	}
	try {
	  const res = await getVideos(data);
	  videoTree.value = res.data;
	  console.log('treeData', res.data);
	} catch (error) {
	  console.log('获取数据失败', error)
	}
}
const handleBuy = () => {
uni.showToast({
title: '购买功能开发中',
icon: 'none'
})
}
onMounted(()=>{
	// console.log('页面参数:', options.categoryId);
	getVideo(clazz.courseId);
})
onLoad( (options)=> {
  console.log("页面参数",
  )
  clazz = options;
  console.log("res",clazz)
})	
</script>
<style>
page {
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #f5f5f5;
}
.header {
height: 88rpx;
background-color: #ffffff;
padding: 0 30rpx;
display: flex;
align-items: center;
flex-shrink: 0;
}
.header-left {
display: flex;
align-items: center;
gap: 20rpx;
}
.title {
font-size: 32rpx;
color: #333333;
font-weight: 500;
}
.currentChapter{
	color:#dc4b15
}
.video-container {
width: 750rpx;
height: 422rpx;
background-color: #000000;
flex-shrink: 0;
}
.video {
width: 100%;
height: 100%;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.tabs {
height: 88rpx;
display: flex;
background-color: #ffffff;
flex-shrink: 0;
}
.tab-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #666666;
position: relative;
}
.tab-item.active {
color: #2979ff;
}
.tab-item.active::after {
content: '';
position: absolute;
bottom: 0;
width: 40rpx;
height: 4rpx;
background-color: #2979ff;
border-radius: 2rpx;
}
.scroll-content {
flex: 1;
overflow: auto;
}
.chapter-list {
padding: 20rpx 30rpx;
}
.active {
	color: #ff826b !important;
}
.chapter-item {
background-color: #ffffff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.chapter-info {
flex: 1;
margin-right: 20rpx;
}
.chapter-title {
font-size: 28rpx;
color: #333333;
margin-bottom: 10rpx;
display: block;
}
.chapter-duration {
font-size: 24rpx;
color: #999999;
}
.chapter-status {
display: flex;
align-items: center;
gap: 10rpx;
}
.free-tag {
font-size: 24rpx;
color: #2979ff;
background-color: rgba(41, 121, 255, 0.1);
padding: 4rpx 12rpx;
border-radius: 4rpx;
}
.course-intro {
padding: 30rpx;
}
.intro-section {
background-color: #ffffff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 20rpx;
}
.section-title {
font-size: 32rpx;
color: #333333;
font-weight: 500;
margin-bottom: 20rpx;
display: block;
}
.section-content {
font-size: 28rpx;
color: #666666;
line-height: 1.6;
}
.course-notes {
padding: 30rpx;
}
.note-item {
background-color: #ffffff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 20rpx;
}
.note-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
}
.note-title {
font-size: 28rpx;
color: #333333;
font-weight: 500;
}
.note-tag {
font-size: 24rpx;
color: #2979ff;
background-color: rgba(41, 121, 255, 0.1);
padding: 4rpx 12rpx;
border-radius: 4rpx;
}
.note-preview {
font-size: 26rpx;
color: #999999;
line-height: 1.6;
}
.bottom-bar {
height: 100rpx;
background-color: #ffffff;
padding: 0 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
margin-top: 20rpx;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.price-info {
display: flex;
align-items: baseline;
gap: 12rpx;
}
.price {
font-size: 36rpx;
color: #ff6b6b;
font-weight: bold;
}
.origin-price {
font-size: 24rpx;
color: #999999;
text-decoration: line-through;
}
.buy-btn {
width: 240rpx;
height: 72rpx;
line-height: 72rpx;
border-radius: 36rpx;
font-size: 28rpx;
margin: 0;
}
</style>
